<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	*{margin:0;padding:0;}
	div{border:1px solid red;width:300px;height:200px;overflow: hidden;}
	ul{list-style:none;width:1500px;-webkit-transform:translateX(-300px);}
	ul li{width:300px;height:200px;float:left;border:1px solid;box-sizing:border-box;font-size:40px;font-weight:bold;}
	ul li:nth-child(1){background: red;}
	ul li:nth-child(2){background: pink;}
	ul li:nth-child(3){background: yellow;}
	ul li:nth-child(4){background: red;}
	ul li:nth-child(5){background: pink;}
	
	</style>
</head>
<body>
<div id="div">
	<ul>
		<li>3</li>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>1</li>
	</ul>
</div>
<script>
	var odiv = document.getElementById('div');
	var oul = odiv.getElementsByTagName('ul')[0];
	var oli = oul.getElementsByTagName('li');
	var seep = -oli[0].offsetWidth;
	var s = seep;
	var y = 0;
	var i = 1;
	var sx=0;
	var tim = null;
	// oul.addEventListener('touchstart',fnStart,false);
	odiv.addEventListener('touchstart',fnStart,false);
	odiv.addEventListener('touchmove',fnMove,false);
	// oul.addEventListener('touchend',fnEnd,false);
	function fnStart(ev){
		clearInterval(tim);
		sx = ev.changedTouches[0].pageX;
		y = s;
	}
	function fnMove(ev){
		var mx = ev.changedTouches[0].pageX;
		s = y + mx - sx;
		if(s < -1200){
			s = -300;
			console.log(s)
			oul.style.transition = 'none';
		}
		if(s > -300){
			s = -900;
			oul.style.transition = 'none';
		}
		oul.style.transition = 'none';
		oul.style.WebkitTransform = 'translateX('+s+'px)';
	}
	function fnEnd(){
		
		auto();
	}
	auto();
	function auto(){
		tim = setInterval(function(){
		oul.style.transition = '0.5s all';
		s = s + seep;
		if(s < -1200){
			s = -300;
			console.log(s)
			oul.style.transition = 'none';
		}
		if(s > -300){
			s = -900;
			oul.style.transition = 'none';
		}
			
				tab(oul,s)

		},1000)
	}


	function tab(obj,x){
		
		obj.style.WebkitTransform = 'translateX('+x+'px)';
	}

</script>
</body>
</html>